<template>
  <div class="app-container">
    <!--查询-->
    <el-form :inline="true">
      <el-form-item>
        <el-date-picker
          v-model="searchForm.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.flag" type="primary" placeholder="请输入flag" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSearch"/>
      </el-form-item>
    </el-form>
    <!--分页表格内容-->
    <div>
      <el-table v-loading="loading" :data="data">
        <el-table-column
          type="index"
          label="序号"/>
        <el-table-column
          prop="date"
          label="日期"/>
        <el-table-column
          prop="flag"
          label="flag"/>
        <el-table-column
          prop="clickCount"
          label="打开网页次数"/>
        <el-table-column
          prop="downloadCount"
          label="点击下载按钮次数"/>
        <el-table-column
          prop="clickIpCount"
          label="打开网页次数（IP去重）"/>
        <el-table-column
          prop="downloadIpCount"
          label="点击下载按钮次数（IP去重）"/>
      </el-table>
      <div class="page">
        <el-pagination
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>

<script>
import { getAdvertisementClick } from '../../api/advertisement/advertisementClick';
import timeUtils from '@/utils/timeHandle.js';

export default {
  name: 'AdvertisementClick',
  data() {
    return {
      searchForm: {
        date: undefined,
        flag: undefined
      },
      loading: false,
      data: [],
      // 分页数据
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    };
  },

  methods: {
    // 搜索
    onSearch() {
      this.page.currentPage = 1;
      this.getData();
    },
    // 跳转页面
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getData();
    },
    // 跳转页面
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getData();
    },
    getData() {
      if (!this.searchForm.date || this.searchForm.date === '') {
        this.$message.error('请选择日期');
        return;
      }
      this.loading = true;
      const begin = this.searchForm.date[0];
      const end = this.searchForm.date[1];
      const param = {
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
        beginDate: timeUtils.timeHandle(begin, 'date'),
        endDate: timeUtils.timeHandle(end, 'date'),
        flag: this.searchForm.flag
      };
      getAdvertisementClick(param).then(response => {
        this.data = response.data.rows;
        this.page.total = response.data.total;
        this.loading = false;
      });
    }
  }
};
</script>

<style scoped>
  .page {
    padding-top: 20px;
  }
</style>
